<template>
  <!-- <el-select-v2
    class="full"
    v-model="valueId"
    filterable
    remote
    :remote-method="remoteMethod"
    :loading="loading"
    :options="options"
    @change="handleChange"
    :placeholder="placeholder"
    :props="{ placeholder: '请选择' }"
  >
    
  </el-select-v2> -->

   <el-select
        v-model="valueId"
        filterable
        remote
        reserve-keyword
        remote-show-suffix
        :remote-method="remoteMethod"
        :loading="loading"
        @change="handleChange"
    :placeholder="placeholder"
    :props="{ placeholder: '请选择' }"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
</template>
<script setup lang="ts">
import { listStation } from '@/api/station/index';
const props = defineProps({
  /**当前双向数据绑定的值 */
  modelValue: {
    type: [String, Number],
    default: ''
  },
  /**输入框内部的文字 */
  placeholder: {
    type: String,
    default: '请选择'
  }
});

const emit = defineEmits(['update:modelValue', 'change']);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const options = ref<Array<any>>([]);

let loading = ref(false);
const valueId = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val);
  }
});
function handleChange(val: string | number) {
  let option = options.value.find((it) => it.stationId == val);
  emit('change', option);
}
const remoteMethod = async (query: string) => {
  loading.value = true;
  const res = await listStation({ name: query, pageNum: 1, pageSize: 200 });
  loading.value = false;
  options.value = (res.rows || []).map((it) => ({ ...it, value: it.stationId, label: it.name }));
};

remoteMethod('');
</script>
<style lang="scss" scoped>
.option-item {
  display: flex;
  height: 70px;
  flex-direction: column;

  .lebel {
    color: #323a45;
  }

  .des {
    color: #667685;
  }
}
</style>